<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="h_top">
          <div class="bread_title">
            <span>更新设备组</span>
          </div>
          <div class="save_button">
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-document-checked" size="mini" @click="save">保存</el-button>
            </div>
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-document-remove" size="mini" @click="confirmDel">删除</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-row>
        <el-col :span="24">
          <el-form ref="form" :model="data" :inline="true" :rules="formRules">
            <el-input v-model="data.id" type="hidden" />
            <el-row :gutter="10">
              <el-col :xl="4" :lg="5" :md="7" :sm="8">
                <el-form-item prop="coding">
                  <div>编码</div>
                  <el-input v-model="data.coding" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="4" :lg="5" :md="7" :sm="8">
                <el-form-item prop="name">
                  <div>名称</div>
                  <el-input v-model="data.name" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="4" :lg="5" :md="7" :sm="8">
                <el-form-item prop="cost_id">
                  <div>成本中心</div>
                  <v-select v-model="data.cost_id" action="costList" />
                </el-form-item>
              </el-col>
              <el-col :xl="4" :lg="4" :md="7" :sm="8">
                <el-form-item prop="status">
                  <div>状态</div>
                  <el-select v-model="data.status" size="mini">
                    <el-option v-for="(item, index) in theStatus" :key="index" :value="index" :label="item" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xl="4" :lg="5" :md="7" :sm="8">
                <el-form-item prop="type">
                  <div>类型</div>
                  <el-select v-model="data.type" size="mini">
                    <el-option v-for="(item, index) in typeCategory" :key="index" :value="index" :label="item" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xl="4" :lg="5" :md="7" :sm="8">
                <el-form-item prop="admin_id">
                  <div>维护负责人</div>
                  <v-select v-model="data.admin_id" />
                </el-form-item>
              </el-col>
              <el-col :xl="4" :lg="5" :md="7" :sm="8">
                <el-form-item>
                  <div>电话</div>
                  <el-input v-model="data.admin.phone" size="mini" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="7" :sm="8">
                <el-form-item prop="sort">
                  <div>排序</div>
                  <el-input v-model="data.sort" size="mini" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-tabs>
            <el-tab-pane label="描述">
              <el-row :gutter="10">
                <el-col :xl="4" :lg="4" :md="5" :sm="5">
                  <div>
                    <span>创建时间日期</span>
                    <el-input v-model="data.create_time" placeholder="创建时间日期" class="mtb10" size="mini" :disabled="true" />
                  </div>
                  <div>
                    <span>创建人</span>
                    <el-input v-model="data.cr_admin.name" placeholder="创建人" class="mtb10" size="mini" :disabled="true" />
                  </div>
                  <div v-if="data.update_time">
                    <div>
                      <span>最近更新</span>
                      <el-input v-model="data.update_time" placeholder="最近更新" class="mtb10" size="mini" :disabled="true" />
                    </div>
                    <div>
                      <span>更新者</span>
                      <el-input v-model="data.up_admin.name" placeholder="更新者" class="mtb10" size="mini" :disabled="true" />
                    </div>
                  </div>
                </el-col>
                <el-col :span="10">
                  <el-form ref="append_form" :model="appendGroup" :inline="true" :rules="appendRules">
                    <el-card>
                      <div slot="header">
                        <el-row :gutter="10">
                          <el-col :span="3">
                            <el-button icon="el-icon-plus" size="mini" class="add-button" @click="append" />
                          </el-col>
                          <el-col :span="21">
                            <el-form-item prop="equipment_id">
                              <v-select v-model="appendGroup.equipment_id" action="specialList" />
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </div>
                      <ul>
                        <li v-for="(item, index) in equipment_list" :key="index" class="mb10">
                          {{ item.eq_special.coding }} | {{ item.eq_special.name }}
                          <el-button class="ml10" icon="el-icon-delete" size="mini" @click="remove(index, item.id)" />
                        </li>
                      </ul>
                    </el-card>
                  </el-form>
                </el-col>
                <el-col :xl="10" :lg="10" :md="9" :sm="9">
                  <wangeditor id="content" v-model="data.content" />
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="维护计划">
              <el-table :data="plan">
                <el-table-column prop="coding" label="编码" />
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="priority" label="优先程度" />
                <el-table-column prop="category" label="类别" />
                <el-table-column prop="profession" label="专业" />
                <el-table-column prop="prev_execute" label="上次执行" />
                <el-table-column prop="next_date" label="下一日期" />
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="历史">
              <el-table :data="wordorder">
                <el-table-column label="创建时间日期" prop="create_time" />
                <el-table-column label="优先程度" prop="priority" />
                <el-table-column label="类别" prop="category" />
                <el-table-column label="专业" prop="profession" />
                <el-table-column label="名称" prop="name" />
                <el-table-column label="状态" prop="status" />
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import API from '@/api/special/group'
import { typeCategory, theStatus } from '@/utils/options'
import Wangeditor from '@/components/editor/wangeditor'
import VSelect from '@/components/select'
export default {
  inject: ['backUrl', 'delOne', 'update', 'appendOtherAdmin', 'delOtherAdmin', 'getWeightFormat'],
  components: {
    Wangeditor,
    VSelect
  },
  data() {
    return {
      data: {
        'admin': {
          'phone': ''
        },
        'cr_admin': {
          'name': ''
        }
      },
      appendGroup: {},
      equipment_list: [],
      plan: [
        {
          coding: 'WHJH001',
          name: '设备组周检',
          priority: '最优先',
          category: '测量性',
          profession: '电器',
          prev_execute: '2020-01-01',
          next_date: '2020-01-08'
        },
        {
          coding: 'WHJH002',
          name: '设备组月检',
          priority: '第二级优先',
          category: '累积性',
          profession: '机械',
          prev_execute: '2020-01-01',
          next_date: '2020-02-01'
        }
      ],
      wordorder: [
        {
          create_time: '2020-01-01',
          priority: '立即',
          category: '测量',
          profession: '电气',
          name: '每月维护设备',
          status: '已归档'
        }
      ],
      typeCategory,
      theStatus,
      formRules: {
        coding: [
          {
            required: true,
            message: '请输入编号',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入设备组名称',
            trigger: 'blur'
          }
        ],
        cost_id: [
          {
            required: true,
            message: '请选择成本中心',
            trigger: 'change'
          }
        ],
        status: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }
        ],
        position_id: [
          {
            required: true,
            message: '请选择位置',
            trigger: 'change'
          }
        ],
        type: [
          {
            required: true,
            message: '请选择类型',
            trigger: 'change'
          }
        ],
        admin_id: [
          {
            required: true,
            message: '请选择维护负责人',
            trigger: 'change'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ]
      },
      appendRules: {
        equipment_id: [
          {
            required: true,
            message: '请选择设备',
            trigger: 'change'
          }
        ]
      }
    }
  },
  watch: {},
  created() {
    const id = this.$route.params.id
    API.getOne(id).then(response => {
      if (response.data.error_code === 29404) {
        this.$alert('您请求的设备组不存在', '错误', {
          confirmButtonText: '确定',
          callback: () => {
            this.backUrl()
          }
        })
      }
      this.equipment_list = response.data.eq_list
      this.data = response.data
    })
  },
  methods: {
    confirmDel() {
      const id = this.data.id
      this.delOne(API, id, true)
    },
    save() {
      const thisData = this.data
      const thisForm = this.$refs.form
      this.update(API, thisData, thisForm)
    },
    append() {
      this.$refs.append_form.validate((valid) => {
        if (valid) {
          const eq_data = {
            'equipment_id': this.appendGroup.equipment_id,
            'group_id': this.$route.params.id
          }
          API.append(eq_data).then(response => {
            if (response.data.error_code === 1) {
              this.$message({
                message: '恭喜你，添加成功',
                type: 'success'
              })
              API.getOne(this.$route.params.id).then(response => {
                this.equipment_list = response.data.eq_list
              })
            } else if (response.data.error_code === 29004) {
              this.$message.error('该设备已存在')
            } else {
              this.$message.error(response.data.message)
            }
          })
        }
      })
    },
    remove(index, id) {
      const eq_data = {
        'id': id
      }
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        API.remove(eq_data).then((response) => {
          if (response.data.error_code === 1) {
            this.$message({
              message: '恭喜你，删除成功',
              type: 'success'
            })
            API.getOne(this.$route.params.id).then(response => {
              this.equipment_list = response.data.eq_list
            })
          } else {
            this.$message.error(response.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style>
.add-button{
  margin-top: 5px;
}
</style>
